<template>
  <div class="page-container-padding">
    <div style="display: flex; flex-wrap: wrap">
      <el-badge
        v-for="b in badgeList"
        :key="b.key"
        :value="b.row_count"
        style="margin-right: 22px"
      >
        <el-tag style="cursor: pointer" @click="toHandlePage(b)">
          {{ b.module_name }}
        </el-tag>
      </el-badge>
    </div>
    <div style="margin-top: 16px">
      <el-table border stripe :data="coordinationList">
        <el-table-column label="类型" prop="module_name" width="160px">
          <template #default="scope">
            <div class="module-name" @click="toSkipHandlePage(scope.row)">
              {{ scope.row.module_name }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="申请人" prop="applicant"></el-table-column>
        <el-table-column label="申请时间" prop="create_time"></el-table-column>
        <el-table-column label="名称" prop="title"></el-table-column>
        <el-table-column label="服务时间" prop="service_time"></el-table-column>
        <el-table-column label="状态" prop="state_text"></el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
  import { GetStateRecords } from '@/api/prodService'
  export default {
    data() {
      return {
        badgeList: [],
        coordinationList: [],
      }
    },
    mounted() {
      this.getTableData()
    },
    methods: {
      getTableData() {
        GetStateRecords().then((res) => {
          // console.log(res)
          const data = res.data
          this.coordinationList = data.data
          this.badgeList = data.badge
        })
      },

      toSkipHandlePage(item) {
        this.$router.push({ name: item.router_name })
      },

      toHandlePage(item) {
        // console.log(item)
        this.$router.push({ name: item.router_name })
      },
    },
  }
</script>
<style scoped lang="scss">
  .module-name {
    cursor: pointer;
    &:hover {
      color: #007acc;
    }
  }
</style>
